<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>看板</title>
	<meta name="decorator" content="default"/>
	<style>
		.back{
			background-color:#94EF94;
		}
		#myView {
		     
			 margin-left:100px;
		}
  		/*  Tab切换css样式 */ 
  		 dl,dd,dt{margin:0;padding:0;font-size:13px;line-height:1.5;}
		 .cur{color:#f60;border-bottom:1px solid #fff;font-weight:bold;background:#fff;cursor:default;}
		 #tab_,dl{position:relative;float:left;height:100px;width:100%;}
		 h4,dt{float:left;height:20px;margin:0 0 0 8px;display:inline;line-height:20px;width:80px;border:1px solid #b3ddf9;position:relative;z-index:11;text-align:center;font-weight:normal;cursor:pointer;background:#b3def9;}
		 .c,dd{position:absolute;top:21px;border:1px solid #b3ddf9;left:0;width:96.5%;padding:10px;overflow:hidden;display:block;}
		 #tab_{clear:left;}
		 h1{clear:left;padding:10px 0}
		 #tab_1.cur{color:#f60}
		 #tab_2.cur{color:blue}
		 #tab_3.cur{color:green}

  	</style>
  	<!-- <script language="JavaScript">
		
	</script> --> 
	<!-- <script type="text/javascript" src="src/main/webapp/static/jquery/jquery-1.8.3.js"></script> -->
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script type="text/javascript">
		$(function(){
		   //图表需要的 变量
		   var chart = {
				      type: 'column'
		   };
		   var title = {
		      text: '工作量统计'   
		   };
		   var subtitle = {
		      text: 'Huayan create products'  
		   };
		   var xAxis = {
		      categories: ['业务类型'],
		      crosshair: true
		   };
		   var yAxis = {
		      min: 0,
		      title: {
		         text: '数量 (个)'         
		      }      
		   };
		   var tooltip = {
		      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		         '<td style="padding:0"><b>{point.y:f} 个</b></td></tr>',
		      footerFormat: '</table>',
		      shared: true,
		      useHTML: true
		   };
		   var plotOptions = {
		      column: {
		         pointPadding: 0.2,
		         borderWidth: 0
		      }
		   };  
		   var credits = {
		      enabled: false
		   };
		   
		   var series= [{
		        name: '开发量',
		            data: [${map.get("DEVELOP_NUM")}]
		        },{
		        name: '电话量',
		            data: [${map.get("TELE_NUM")}]
		   }];   
		      
		   var json = {};   
		   json.chart = chart; 
		   json.title = title;   
		   json.subtitle = subtitle; 
		   json.tooltip = tooltip;
		   json.xAxis = xAxis;
		   json.yAxis = yAxis;  
		   json.series = series;
		   json.plotOptions = plotOptions;  
		   json.credits = credits;
						 
			//生成图表
			$("#container").highcharts(json);
			
			
			
			//视图切换 点击发送请求 
			$("dt").click(function(){
				//alert("aaa");
				var type =  $(this).attr("name");
				var developNum;
				var teleNum;
				
				var userId = ${userId};
				//alert(userId);
				
					var url = "${ctx}/information/information/findPersonNum";
					var args = {"userId":userId,"type":type,"time":new Date()};
					$.getJSON(url,args,function(data){
						
						developNum = data.developNum;
						teleNum = data.teleNum;
					
 
						var series= [{
					        name: '开发量',
					            data: [developNum]
					   },{
					        name: '电话量',
					            data: [teleNum]
					   }]; 
						json.series = series;
						$('#container').remove();
						$("#newContainer").append("<div id='container' style='width: 550px; height: 400px; margin: 0 auto'></div>");
						$('#container').highcharts(json);
						//===============去除报表的y轴小数点显示===========
						var vals=$("tspan");
						/* var val=$(vals[0]).text();
						alert(val); */
						for(var i = 0;i<vals.length;i++){
							var val=$(vals[i]).text();
							if(!isNaN(val)){
								//alert(val);
								if(!isNum(val)){
									//alert(val);
									$(vals[i]).text(" ");
								}
							}
						}
					});
				
					
					
			});
		//===============去除报表的y轴小数点显示===========
			var vals=$("tspan");
			/* var val=$(vals[0]).text();
			alert(val); */
			for(var i = 0;i<vals.length;i++){
				var val=$(vals[i]).text();
				if(!isNaN(val)){
					//alert(val);
					if(!isNum(val)){
						//alert(val);
						$(vals[i]).text(" ");
					}
				}
			}
			//判断是否是整数（不是小数）
			function isNum(s) {
				 //var regu = "^([0-9]*)$";
				 var regu = "^([0-9]*[.0-9])$"; // 小数测试
				 var re = new RegExp(regu);
				 if (s.search(re) != -1)
				  return true;
				 else
				  return false;
			}
		//==============================
		})
	
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="javascript:void(0)">统计报表</a>
		</li>
	</ul>
	<!-- tab切换效果 -->
	 <div style="text-align:center;margin-top:-50px;height: 100px; ">
	   <dl id="tab">
		<dt  name="QUERY_BY_MONTH">月视图</dt>
				<dd>
					<div id="chart1" class="chartClass" style="height:800px">
						
					</div>
				</dd>
	    
	    <dt  name="QUERY_BY_DAY">日视图</dt>
				<dd>
					<div id="chart2" class="chartClass" style="height:800px">
						
					</div> 
				</dd>
	    
	  </dl>
	<!-- <div id="myView" style="margin-left:200px;">
		<input id="viewSwitchDay" class="viewSwitch btn" type="button" name="QUERY_BY_DAY" value="日视图" >
		<input id="viewSwitchMonth" class="viewSwitch btn" type="button" name="QUERY_BY_MONTH" value="月视图">
	</div> -->
	
	
	<div id="newContainer" style="margin-top:62px;">
		<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
	</div>
	<!-- tab切换的JS代码 -->
	 <script type="text/javascript">
		function id(elem) {return document.getElementById(elem)}
		function show(elem) {elem.style.display = "";}
		function hide(elem) {elem.style.display = "none";}
		function next( elem ) {
			do {
				elem = elem.nextSibling;
			} while ( elem && elem.nodeType != 1 );
			return elem;
		}
		function tab(a, p) {
		 
		 var p = (p === undefined) ? {e:"onclick",n:1} : p,
		  node = id(a).firstChild,
		  x = [];
		 p.e = (p.e === undefined) ? "onclick" : p.e;
		 p.n = (p.n === undefined) ? 1 : p.n;
		 node=(node.nodeType !== 1)?next(node):node;
		 for (var i = 1, node; node; i++, node = next(node)) {
		  x[i] = node;
		 }
		 for (var i = 1; x[i]; i++) {
		  if(i % 2 == 0){hide(x[i]);x[i-1].id=a+(i/2)}
			 x[p.n*2-1].className = "cur";
		  show(x[p.n*2]);
		  temp = function (i) {
		   if (i % 2 == 1) {
			x[i][p.e] = function () {
			 for (var j = 1; x[j]; j++) {
			  if (j % 2 == 0) {
			   hide(x[j]);
			   x[j-1].className = ""
			  }
			 }
			 show(x[i+1]);
			 x[i].className = "cur"
			}
		   } else {
			return null
		   }
		  }(i)
		 }
		}
		tab("tab",{e:"onclick",n:2});
	</script>
</body>
</html>